<template>
    <div class="warehouse-set">
        <el-row>
            <el-breadcrumb separator=">">
                <el-breadcrumb-item >基础设置</el-breadcrumb-item>
                <el-breadcrumb-item>仓库设置</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6" class="grid-content">
                <el-radio-group v-model="status" size="small"  @change="changeStatus">
                    <el-radio-button label="true">启用</el-radio-button>
                    <el-radio-button label="false">未启用</el-radio-button>
                </el-radio-group>
            </el-col>
            <el-col :span="14" class="grid-content"></el-col>
            <el-col :span="4" class="grid-content" style="text-align: right;">
                <el-button type="primary" size="small" @click="$refs['warehouseDetail'].show()">新增</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-table
            :data="tableDat" stripe>
                <el-table-column
                    prop="name"
                    label="仓库名称">
                </el-table-column>
                <el-table-column
                    prop="addr"
                    label="仓库地址">
                </el-table-column>
                <el-table-column
                    prop="tel"
                    label="仓库电话">
                </el-table-column>
                
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="large" @click="$refs['warehouseDetail'].show(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="width:530px; margin:20px auto;">
                <el-pagination
                    background
                    :page-size="num_per_page"
                    layout="total, sizes, prev, pager, next"
                    :page-sizes="[10, 30, 50]"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="current_page"
                    :total="total">
                </el-pagination>
            </div>
            
        </el-row>
        <!-- 详情页面 -->
        <warehouse-detail ref="warehouseDetail" @update="warehouseList"></warehouse-detail>
        
    </div>
</template>

<script>
import Setting from '../../api/setting';
import WarehouseDetail from './WarehouseDetail.vue';

export default {
    
    components: {
        WarehouseDetail
    },
    data() {
        return {
            tableDat: [{
                name: 'Amazon 英国',
                addr: 'Amazon.de',
                tel: '',
                id: ''
            }],
            current_page: 1,
            total: 0,
            num_per_page: 10,
            status: true
        };
    },
    
    created() {
       this.warehouseList();
    },
    methods: {
        warehouseList() {
            Setting.warehouseList(
                this.status,
                this.current_page, 
                this.num_per_page
                ).then(res=>{
                this.tableDat = res.data.warehouses;
                this.total = res.data.pageDat.total;
            });
        },
        handleSizeChange(val) {
            this.num_per_page = val;
            // console.log(`每页 ${val} 条`);
            this.warehouseList();
        },
        handleCurrentChange(val) {
            this.current_page = val;
            // console.log(`当前页: ${val}`);
            this.warehouseList();
        },
        changeStatus(val) {
            this.status = val;
            this.warehouseList();
        }
       
    },



};
</script>
<style>
    .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
